<!--
 * @Descripttion: 注册
 * @Author: maybe
 * @Date: 2019-06-24 17:51:21
 -->
<template>
  <div class="register">

        <el-container>   
          <div class="main">
                <div class="left"></div>
             <el-form :model='loginForm' :rules='rules' hide-required-asterisk  ref='loginForm' class='loginForm'>
                <h3 class="text-center">注册</h3>
                <p class="text-center">领取$100,000体验金</p>
                <el-form-item label="" prop="phone">
                  <el-input   prefix-icon="el-icon-mobile-phone" @blur=" getSalts" v-model="loginForm.phone" placeholder="手机号"></el-input>
                </el-form-item> 
                <el-form-item label="" prop="verifyCode">
                  <el-input  prefix-icon=""  v-model="loginForm.verifyCode"  placeholder="输入验证码">              
                      <el-button slot="append"
                          v-if="!countDown"
                          class="verification"                   
                          @click.prevent="getVerify()"
                        style="color:#fff;">
                          获取验证码
                        </el-button>
                        <el-button slot="append"
                          class="verification"  
                          v-else>
                          已发送({{countDown}}s)
                        </el-button>
                  </el-input>
                </el-form-item> 
                <el-form-item label="" prop="password">
                  <el-input prefix-icon="el-icon-lock" v-model="loginForm.password"  placeholder="密码"></el-input>
                </el-form-item>
           
            
            <el-form-item label="" prop="inviter">
              <el-input prefix-icon="el-icon-user" v-model="loginForm.inviter"  placeholder="IB经纪人编号"></el-input>
            </el-form-item> 

            <el-form-item label="" class="text-center" >
                <el-button size='medium' style="width:100%;letter-space:4px;"  type="primary" @click="submitForm('loginForm')">注册</el-button>
            </el-form-item> 
            <div class="text-center margin-top-20"> <span class="font-gray">已有账号去</span> <span class="hand font-white" @click="goLogin">登录</span></div>     
          </el-form>
          </div>
        </el-container>     
  </div>
</template>

<script>
import {register,getSalt,getVerifyCode} from './../ajax/index'
import {regPhone} from './../assets/js/rule'
export default {
  name: 'Register',
  data () {
    return {
      value:true,
      salt:'',
      verifyCode: '',
      countDown: 0,//倒计时
      loginForm: {
        phone:'',
        verifyCode:'',
        password:'',
        inviter:''
      },
      rules: {
        phone:[
          {required: true, message: '请输入手机号', trigger: ['blur','change']},
        ],
        verifyCode:[
          {required: true, message: '请输入验证码', trigger: ['blur','change']},
        ],
        password:[
          {required: true, message: '请输入密码', trigger: ['blur','change']},
        ],
        inviter:[
          // { required: true, message: '请输入邀请人',trigger:['blur','change']}
        ]
      }
    }
  },
  methods:{
    regPhone,
    goLogin() {
        this.$router.push({path:'/login'})
    },
   

    // 提交注册
         submitForm(formName) {   
         this.getSalts();   
          this.$refs[formName].validate((valid) => {
          if (valid) {  
              const password = this.$md5(this.loginForm.password+this.salt)
              const param = {
                  'phoneNum': this.loginForm.phone,
                  'password': password,
                  'verifyCode': this.loginForm.verifyCode,
                  'inviter': this.loginForm.inviter
              }        
              register(param).then(response => {           
                if(response.code === '200' && response.data.state === '1'){  
                    var _this = this;               
                    this.$message({
                        message: '注册成功',
                        type: 'success',
                        duration:2000,
                        onClose: function(){
                          console.log(this);
                          _this.$router.push({path:'/login'})
                        }
                      });
                }else{
                    this.$message({
                        message:response.data.message,
                        type: 'error',
                        duration:2000,               
                    });
                }
              })
              .catch(error =>{
                     this.$message({
                        message:response.data.message,
                        type: 'error',
                        duration:2000,               
                    });
              })
              
          } else {
            return false;
          }
        });
      },
      async getSalts(){
        if (!regPhone(this.loginForm.phone)) return false; 
        const param = {
             'phoneNum': this.loginForm.phone,
             'state': 2   // 登录是1
        }
        let result =  await getSalt(param);
          console.log(result);
        if(result.code === '200' && result.data.state === '1'){
              this.salt = result.data.data;
              console.log(this.salt);
        }else{
            alert(result.data.message);
        }
    },
    // @description: 获取短信验证码 
    async getVerify() {
       if (regPhone(this.loginForm.phone)) {
          const param = {
                'phoneNum': this.loginForm.phone
          }
          let result = await getVerifyCode(param);
          if(result.code === '200' && result.data.state === '1'){
                this.loginForm.verifyCode = result.data.data;
                console.log(this.verifyCode);
          }else{
                this.$message({
                    message:result.data.message,
                    type: 'error',
                    duration:2000,               
                });
                return false;
          }
          this.countDown = 60;
          this.intervalId = setInterval(() => {
            this.countDown--;
            // 判断
            if (this.countDown === 0) {
              clearInterval(this.intervalId);
            }
          }, 1000);
        }else{
           this.$message({
                message: '请输入正确的手机号',
                type: 'error',
                duration:2000,               
            });
            return false;
        }
    }
  }
}
</script>

<style>
  .el-form-item__error{color: red}
  .el-form-item.is-error .el-input__inner{border:2px solid #4ec2e3;}
  .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus{border:none;background: rgba(117,119,173,0.2)}
  .el-input-group--append .el-input__inner, .el-input-group__prepend{background: rgba(117,119,173,0.2);border: none;}
  .el-input--prefix .el-input__inner{background: rgba(117,119,173,0.2);border:none;text-indent: 10px;color: #fff;}
  .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus{color: #FFF;}
  .el-input__icon{color: #fff;}
  .el-input-group--prepend .el-input__inner, .el-input-group__append{background: rgba(117,119,173,0.2)!important;border: none}
  .el-input-group__append button.el-button{border:none}
  .loginForm .verification span{padding-left: 10px;padding-top: 4px;padding-bottom: 4px;border-left: 1px solid #fff;}
 
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  .font-white{color: #fff;}
  .main{position: relative;width: 800px;height:500px;margin: 160px auto;overflow: hidden;}
  .left{display: inline-block;width: 240px;height: 100%;  background: linear-gradient(to bottom, #4ec2e3 , #4e89e3); float: left;}
  .loginForm{display: inline-block;padding-top:40px;  width: calc(100% - 240px);height: 100%;background-color:#252647;float: left;}
   h3{font-size: 30px;color: #4ec2e3;font-weight: normal;}
  .loginForm p{font-size: 14px;line-height: 30px;}
  .el-form-item{width: 360px;margin: 20px auto 0;}
   

</style>
